<template>
  <div>
    <a-card title="查询条件">
      <a-row>
        <a-col class="param_item_label" :span="2">角色名称：</a-col>
        <a-col :span="3">
          <a-input v-model:value="param.name"/>
        </a-col>
        <a-col :span="1"/>
      </a-row>
      <br>
      <div class="operation_row">
        <a-button type="primary" @click="getPage(1,10)">查询</a-button>
      </div>
    </a-card>
    <br>
    <a-card title="角色列表">
      <template #extra>
        <a-button type="primary" @click="openAddModal">添加</a-button>
      </template>
      <a-table rowKey="id" :columns="columns" :dataSource="dataSource" :pagination="pagination" :loading="loading"
               bordered>
        <template #action="{ record }">
          <span>
            <a @click="openUpdateModal(record)">修改</a>
            <a-divider type="vertical"/>
            <a-popconfirm title="确认删除该角色吗?" @confirm="commitDelete(record)">
              <a>删除</a>
            </a-popconfirm>
            <a-divider type="vertical"/>
            <a @click="openAuthModal(record)">授权</a>
          </span>
        </template>
      </a-table>
    </a-card>
    <!-- 新增弹窗 -->
    <a-modal v-model:visible="addModalShow" title="添加新角色" @ok="commitAdd">
      <a-form :model="addRole" :label-col="{span: 6}" :wrapper-col="{span: 16}">
        <a-form-item label="名称">
          <a-input v-model:value="addRole.name"/>
        </a-form-item>
        <a-form-item label="备注信息">
          <a-input v-model:value="addRole.remark"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 修改弹窗 -->
    <a-modal v-model:visible="updateModalShow" title="修改角色信息" @ok="commitUpdate">
      <a-form :model="updateRole" :label-col="{span: 6}" :wrapper-col="{span: 16}">
        <a-form-item label="ID">
          <a-input v-model:value="updateRole.id" :disabled="true"/>
        </a-form-item>
        <a-form-item label="名称">
          <a-input v-model:value="updateRole.name"/>
        </a-form-item>
        <a-form-item label="备注信息">
          <a-input v-model:value="updateRole.remark"/>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 授权弹窗 -->
    <a-modal v-model:visible="authModalShow" :title="`授权[${authRole.name}]`" @ok="commitAuth">
      <a-tree :tree-data="resourcesTree" v-model:checkedKeys="treeChecked" :replaceFields="replaceFields"
              :checkStrictly="true" defaultExpandAll checkable>
      </a-tree>
    </a-modal>
  </div>
</template>

<script>
import { defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import {
  AddRole,
  DeleteRole,
  GetResourcesTree,
  GetRolePage,
  GetRoleResources,
  UpdateRole,
  UpdateRoleResourcesRelation
} from '@/service/auth'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const state = reactive({
      param: {
        name: ''
      },
      loading: true,
      dataSource: [],
      pagination: {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: async (page, size) => {
          await methods.getPage(page, size)
        }
      },
      columns: [{
        title: 'ID',
        dataIndex: 'id',
        width: '20%'
      }, {
        title: '名称',
        dataIndex: 'name',
        width: '20%'
      }, {
        title: '备注信息',
        dataIndex: 'remark',
        width: '40%'
      }, {
        title: '操作',
        key: 'action',
        slots: {
          customRender: 'action'
        }
      }],
      addModalShow: false,
      addRole: {
        name: '',
        remark: ''
      },
      updateModalShow: false,
      updateRole: {
        id: '',
        name: '',
        remark: ''
      },
      authModalShow: false,
      authRole: {
        id: '',
        name: ''
      },
      replaceFields: {
        key: 'id',
        title: 'name',
        children: 'childList'
      },
      resourcesTree: [],
      treeChecked: {
        checked: [],
        halfChecked: []
      }
    })

    const methods = reactive({
      getPage: async (page, size) => {
        state.loading = true
        const {
          count,
          list
        } = await GetRolePage(state.param.name, page, size)
        state.pagination.current = page
        state.pagination.pageSize = size
        state.pagination.total = count
        state.dataSource = list
        state.loading = false
      },
      openAddModal: () => {
        state.addRole.name = ''
        state.addModalShow = true
      },
      commitAdd: async () => {
        state.addModalShow = false
        await AddRole(state.addRole)
        proxy.$message.success(`添加角色[${state.addRole.name}]成功！`)
        await methods.getPage(1, 10)
      },
      openUpdateModal: (role) => {
        state.updateRole.id = role.id
        state.updateRole.name = role.name
        state.updateRole.remark = role.remark
        state.updateModalShow = true
      },
      commitUpdate: async () => {
        state.updateModalShow = false
        await UpdateRole(state.updateRole)
        proxy.$message.success('修改角色信息成功！')
        await methods.getPage(1, 10)
      },
      commitDelete: async (role) => {
        await DeleteRole(role.id)
        proxy.$message.success(`删除角色[${role.name}]成功！`)
        await methods.getPage(1, 10)
      },
      openAuthModal: async (role) => {
        state.loading = true
        state.resourcesTree = await GetResourcesTree()
        state.treeChecked.checked = await GetRoleResources(role.id)
        state.authRole.id = role.id
        state.authRole.name = role.name
        state.authModalShow = true
        state.loading = false
      },
      commitAuth: async () => {
        state.authModalShow = false
        await UpdateRoleResourcesRelation(state.authRole.id, state.treeChecked.checked)
        proxy.$message.success(`授权[${state.authRole.name}]成功！`)
      }
    })

    onMounted(async () => {
      await methods.getPage(1, 10)
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="less" scoped>

</style>
